IsShow = true //控制 AdminLoginishow 管理员登录 的显示隐藏
$('.AdminLogin').css('display', 'none')
$('.AdminLoginishow').click(() => {
    IsShow = !IsShow
    if (IsShow == true) {
        $('.AdminLogin').css('display', 'none')
    } else {
        $('.AdminLogin').css('display', 'flex')
    }
})

new Vue({
    el: '#Head',
    data() {
        return {
            head_ul_li_hover: 0,
            state: document.body.clientWidth,
            hiddenBox: false,
            headlineS: ["首页", "长远创造", "长远少年", "长远导师", "关于我们"],
            btnWrapClass: ["btn-wrap_p_show0", "btn-wrap_p_show1", "btn-wrap_p_show2"],
            nav_boxClass: ["nav-box1", "nav-box2", "nav-box3", "nav-box4", "nav-box5"],
            hrefs: ["./index.html", "./LongTermCreation.html", "./LongTermTeenager.html", "#", "#"],
        }
    },
    methods: {
        AdminLoginishow() {
            IsShow = !IsShow
            if (IsShow == true) {
                $('.AdminLogin').css('display', 'none')
            } else {
                $('.AdminLogin').css('display', 'flex')
            }
        },
        skip(index) {
            if (this.hrefs[index] != "#") {
                this.head_ul_li_hover = index
                window.location.href = this.hrefs[index]
            } else {
                alert("此页面正在建设中")
            }
        }

    }

})
const swiper = new Swiper(".swiper", {
    pagination: {
        el: ".App_swiper-pagination",
        clickable: true,
    },
    on: {
        slideChangeTransitionStart: function () {
            // $(".MainContent_slide2_D3 ul li").css("display", "none")
            //更改分页器的位置
            if (this.activeIndex === 0) {
                MainContent_slide1_pagination.css("bottom", "80%")
            } else if (this.activeIndex === 1) {
                $(".MainContent_slide2_D3 ul li").css("display", "block")
                MainContent_slide1_pagination.css("bottom", "60%")
            } else if (this.activeIndex === 2) {
                MainContent_slide1_pagination.css("bottom", "40%")
            } else if (this.activeIndex === 3) {
                MainContent_slide1_pagination.css("bottom", "20%")
            } else if (this.activeIndex === 4) {
                MainContent_slide1_pagination.css("bottom", "00%")
            }
        },
    },
    direction: 'vertical',
    mousewheel: true,
});
$(".MainContent_slide2_D3 ul li").css("display", "none")
const MainContent_slide2_swiper = new Swiper('.MainContent_slide2_swiper', {
    slidesPerView: 2,
    centeredSlides: true,
    loop: true,
    spaceBetween: 30,
});

const MainContent_slide3_N_img_swiper = new Swiper('.MainContent_slide3_N_img_swiper', {
    autoplay: true,//可选选项，自动滑动
    loop: true,
    pagination: {
        el: '.MainContent_slide3_N_img_swiper-pagination',
        clickable: true,
    },
})
const MainContent_slide4_N_D = new Swiper(".MainContent_slide4_N_D", {})
const MainContent_slide4_N_swiper = new Swiper(".MainContent_slide4_N_swiper", {})
const MainContent_slide5_N_D_S = new Swiper(".MainContent_slide5_N_D_S", {
    on: {
        slideChangeTransitionStart: function (swiper, event) {
            let ul = $(".MainContent_slide5_N_D_S .swiper-wrapper ul").eq(swiper.activeIndex)
            ul.children().eq(0).attr("isMouseover", "false")
            ul.children().eq(1).attr("isMouseover", "false")
            MainContent_slide5_N_D_li_1_mouseover(ul.children()[0])
            MainContent_slide5_N_D_li_2_mouseover(ul.children()[1])
        }
    }
})
const MainContent_slide5_N_DS = new Swiper(".MainContent_slide5_N_DS", {
    spaceBetween: 20,
    on: {
        slideChangeTransitionStart: function (swiper, event) {
            let li = $(".MainContent_slide5_N_DS  ul li").eq(swiper.activeIndex)
            li.eq(0).attr("isMouseover", "false")
            MainContent_slide5_N_D_li_1_mouseover(li[0])
        }
    }
})
// 给轮播图 分页器 添加div
$("#MainContent_slide1_pagination").append("<div></div>")
const MainContent_slide1_pagination = $("#MainContent_slide1_pagination").children().eq(5)
MainContent_slide1_pagination.addClass("swiper-pagination_after")


function debounce(delay) {//防抖
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            SetCss()
        }, delay);
    }
}


function SetCss() {
    const windowInfo = {
        width: window.innerWidth,
        hight: window.innerHeight
    }
    // windowInfo.width < windowInfo.hight
    if (windowInfo.width < windowInfo.hight) {
        $(".MainContent_slide2_D1 h1").css("font-size", "4vw")
        $(".MainContent_slide2_D1 p").css("font-size", "2.5vw")
        $(".MainContent_slide2_D1 img").parent().css("height", "5vw")
        $(".MainContent_slide2_D2").css("font-size", "1.5vw").css("height", "6vw")
        $(".MainContent_slide3_N_D h2").css("font-size", "2.5vw")
        $(".MainContent_slide3_N_D p").css("font-size", "1.5vw")
        $(".MainContent_slide3_N_D_1 h3").css("font-size", "1.5vw")
        $(".MainContent_slide3_N_D_1 p").even().css("font-size", "5vw")
        $(".MainContent_slide5_N_D h3").css("font-size", "3vw")
        $(".MainContent_slide5_N_D p").css("font-size", "2vw")
        $(".MainContent_slide5_N_D_btn").css("font-size", "2vw")

    } else {
        $(".MainContent_slide2_D1 h1").css("font-size", "4vh")
        $(".MainContent_slide2_D1 p").css("font-size", "2.4vh")
        $(".MainContent_slide2_D1 img").parent().css("height", "5vh")
        $(".MainContent_slide2_D2").css("font-size", "1.5vh").css("height", "6vh")

        $(".MainContent_slide3_N_D h2").css("font-size", "2.5vh")
        $(".MainContent_slide3_N_D p").css("font-size", "2vh")
        $(".MainContent_slide3_N_D_1 h3").css("font-size", "2vh")
        $(".MainContent_slide3_N_D_1 p").even().css("font-size", "3.5vh")

        $(".MainContent_slide5_N_D h3").css("font-size", "3vh")
        $(".MainContent_slide5_N_D p").css("font-size", "2.6vh")
        $(".MainContent_slide5_N_D_btn").css("font-size", "2vh")
    }

    // if (windowInfo.width < 920) {
    //     $("#MainContent_slide1_video")[0].src = "../../img/官网视频S.mp4";
    // } else {
    //     $("#MainContent_slide1_video")[0].src = "../../img/官网视频M.mp4";
    //
    // }
    if (windowInfo.width < 900) {
        if (windowInfo.width < windowInfo.hight) {
            $(".MainContent_slide3_N_D h2").css("font-size", "5vw")
            $(".MainContent_slide3_N_D p").css("font-size", "4vw")
            $(".MainContent_slide3_N_D_1 h3").css("font-size", "2vh")
            $(".MainContent_slide3_N_D_1 p").even().css("font-size", "3.5vh")

            $(".MainContent_slide5_N_D h3").css("font-size", "6vw")
            $(".MainContent_slide5_N_D p").css("font-size", "4vw")
            $(".MainContent_slide5_N_D_btn").css("font-size", "3vw")

        }
    }
    $(".MainContent_slide5_N_D2 li").addClass("animate__fadeOut")
    $(".MainContent_slide5_N_D1 li").addClass("animate__fadeOut")
    $(".MainContent_slide5_N li").attr("isMouseover", "false")
}

SetCss()
window.addEventListener('resize', debounce(500));

function MainContent_slide5_N_D_li_1_mouseover(event) {
    if (event.getAttribute('isMouseover') != "true") {
        data = event.getAttribute('data').split(",")
        let int_i = 0
        $(".MainContent_slide5_N_D1").html(" ")
        data.forEach((i) => {
            let dom = `<li style="animation-delay: ` + int_i + `s" class="animate__animated animate__fadeInUp">` + i + `</li>`
            $(".MainContent_slide5_N_D1").append(dom)
            int_i += 0.2
        })
        event.setAttribute("isMouseover", "true")
        $(".MainContent_slide5_N_D1 li").removeClass("animate__fadeOut")
        $(".MainContent_slide5_N_D1 li").css("display", "flex")
    }
}

function MainContent_slide5_N_D_li_2_mouseover(event) {
    if (event.getAttribute('isMouseover') != "true") {
        data = event.getAttribute('data').split(",")
        let int_i = 0
        $(".MainContent_slide5_N_D2").html(" ")
        data.forEach((i) => {
            let dom = `<li style="animation-delay: ` + int_i + `s" class="animate__animated animate__fadeInUp">` + i + `</li>`
            $(".MainContent_slide5_N_D2").append(dom)
            int_i += 0.2
        })
        event.setAttribute("isMouseover", "true")
        $(".MainContent_slide5_N_D2 li").removeClass("animate__fadeOut")
        $(".MainContent_slide5_N_D2 li").css("display", "flex")
    }
}
